<html>
  <head>
    <title>
      五环 3D 嵌套
    </title>
    <style>
      ul{
        list-style: none;
        transform-style: preserve-3d;
      }
      ul li{
        display: inline-block;
        width: 100px;
        height: 100px;
        border:8px solid black;
        border-radius: 100px;
        margin: 0 -28px;
      }
      .li1{
        border:10px solid rgb(96, 144, 208);
      }
      .li2{
        border: 10px solid rgb(237, 185, 81);
        transform: translateY(50px) rotateX(1deg);
        transform-origin: center 25%;
      }
      .li3{
        border:10px solid rgb(80, 80, 93);
        transform: rotateY(179deg) rotateX(179deg);
      }
      .li4{
        border:10px solid rgb(109, 178, 136);
        transform: translateY(50px) rotateY(2deg);
      }
      .li5{
        border:10px solid rgb(198, 71, 84);
        transform: rotateY(179deg);
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="li1"></li>
      <li class="li2"></li>
      <li class="li3"></li>
      <li class="li4"></li>
      <li class="li5"></li>
    </ul>
  </body>
</html>